<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>File Upload and Download</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }

        .container {
            max-width: 600px;
            margin: 0 auto;
        }

        input[type="file"] {
            display: block;
            margin-bottom: 10px;
        }

        button {
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }

        button:hover {
            background-color: #45a049;
        }

        .message {
            margin-top: 20px;
            font-size: 1.2em;
            color: #333;
        }
    </style>
</head>
<body>

<div class="container">
    <h1>File Upload and Download</h1>

    <!-- File Upload Section -->
    <div>
        <h3>Upload a File</h3>
        <form id="uploadForm" enctype="multipart/form-data">
            <input type="file" id="fileInput" name="file" required/>
            <button type="submit">Upload File</button>
        </form>
        <div class="message" id="uploadMessage"></div>
    </div>

    <!-- File Download Section -->
    <div>
        <h3>Download a File</h3>
        <input type="text" id="fileName" placeholder="Enter file name"/>
        <button onclick="downloadFile()">Download File</button>
        <div class="message" id="downloadMessage"></div>
    </div>
</div>

<script>
    // Upload file
    document.getElementById('uploadForm').addEventListener('submit', async function (e) {
        e.preventDefault();

        const fileInput = document.getElementById('fileInput');
        const formData = new FormData();
        formData.append('file', fileInput.files[0]);

        try {
            const response = await fetch('/files/upload', {
                method: 'POST',
                body: formData,
            });

            const result = await response.text();
            if (response.ok) {
                document.getElementById('uploadMessage').textContent = 'File uploaded successfully: ' + result;
            } else {
                document.getElementById('uploadMessage').textContent = 'Error uploading file: ' + result;
            }
        } catch (error) {
            document.getElementById('uploadMessage').textContent = 'Error uploading file: ' + error.message;
        }
    });

    // Download file
    async function downloadFile() {
        const fileName = document.getElementById('fileName').value.trim();
        if (!fileName) {
            document.getElementById('downloadMessage').textContent = 'Please enter a file name';
            return;
        }

        try {
            const response = await fetch(`/files/download/${fileName}`);
            if (response.ok) {
                const blob = await response.blob();
                const link = document.createElement('a');
                link.href = URL.createObjectURL(blob);
                link.download = fileName;
                link.click();
                document.getElementById('downloadMessage').textContent = 'File downloaded successfully: ' + fileName;
            } else {
                document.getElementById('downloadMessage').textContent = 'Error downloading file: ' + response.statusText;
            }
        } catch (error) {
            document.getElementById('downloadMessage').textContent = 'Error downloading file: ' + error.message;
        }
    }
</script>

</body>
</html>
